<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataPzzh } from "@/api/search";
import { addOrUpdatePzzh } from "@/api/addOrUpdate";

const city = window.globalObj.name;

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};

const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");

// 加载html
const initHtml = () => {
	searchDataPzzh({ m: "组织指挥-指挥主体" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "指挥主体")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "指挥控制中心")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "情报信息部")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "政治工作部")?.v || "";
    valueHtml4.value = data.find((x) => x.k === "综合保障部")?.v || "";

  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};
const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "由市人民防空指挥部指挥控制中心的综合计划、人员疏散掩蔽组、重要目标防护组、抢险抢修组、城市管控组、协同救援组，情报信息部的综合情报组、通信警报组、网电防护组、频谱管控组，政治工作部的组织工作组、宣传动员组、群众工作组、心理防护组，综合保障部的组织计划组、工程保障组、防化保障组、卫生防疫组、交通运输保障组、物资器材保障组组成，统一组织指挥协调平战转换行动。"
);
const valueHtml1 = ref(
  "（1）综合计划组<br/>主要职责：拟制平战转换行动、计划、命令、指示等各种指挥文书，传达指挥部的命令、指示；拟制人民防空协同计划。<br/>（2）重要目标防护组<br/>主要职责：组织重要目标防护准备；指导、协调、控制目标单位实施防护行动。<br/>（3）抢险抢修组<br/>主要职责：组织指导人民防空专业队伍、重要目标单位和人民群众实施抢险抢修行动；落实人防专业队伍行动保障。<br/>（4）城市管控组<br/>主要职责：维护社会治安和交通秩序；协调组织城市防空管制。<br/>（5）协同救援组 <br/>主要职责：拟制跨行政区协同救援方案和保障计划；组织跨区域协同救援行动。"
);
const valueHtml2 = ref(
  "（1）警报通信组<br/>主要职责：组织人防指挥通信和协同通信；拟制各阶段通信保障方案。<br/>（2）网电防护组<br/>主要职责：拟制网电信息防护计划；协调、控制信息防护行动。"
);
const valueHtml3 = ref(
  "（1）宣传动员组<br/>主要职责：拟制宣传动员计划和宣传鼓动口号；实施教育、动员和新闻宣传工作。<br/>（2）群众工作组<br/>主要职责：负责收集全市战时民情、社情、网情、舆情；负责开展群众工作和安全保卫工作。<br/>（3）心理防护组<br/>主要职责：掌握民众心理状况，制订心理防护行动计划；组织心理筛查、心理疏导、心理干预、心理救治等行动。"
);
const valueHtml4 = ref(
  "（1）组织计划组<br/>主要职责：拟制综合保障方案、计划、指示；拟制行动协同综合保障计划。<br/>（2）工程保障组<br/>主要职责：组织人防工程平战转换；制定人防工程保障计划；组织协调人防工程各类保障。<br/>（3）防化保障组<br/>主要职责：制定消防和防化保障计划；组织指导人民防空专业队伍和群众实施消防防化行动。<br/>（4）卫生防疫组<br/>主要职责：组织伤病人员救治工作，组织协调医疗救援，保障医疗物资、器材和药品供应；组织对沾染、染毒、地区的侦察、监测、和标示，消除滞留危害，指导群众防护、洗消。<br/>（5）交通运输保障组<br/>主要职责：组织开展交通运输和油料供应的各项保障工作。<br/>（6）物资器材保障组<br/>主要职责：制定物资保障计划；组织协调全市物资保障行动；组织实施人防专业队伍装备器材供应；组织实施人防专业队伍装备器材维修。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdatePzzh({
      m: "组织指挥-指挥主体",
      data: [
        {
          k: "指挥主体",
          v: valueHtml.value,
        },
		{
          k: "指挥控制中心",
          v: valueHtml1.value,
        },
		{
          k: "情报信息部",
          v: valueHtml2.value,
        },
		{
          k: "政治工作部",
          v: valueHtml3.value,
        },
		{
          k: "综合保障部",
          v: valueHtml4.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;

  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;

  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
});
</script>
<template>
  <div class="">
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="指挥控制中心" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="情报信息部" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="政治工作部" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>

    <FirstTitle name="综合保障部" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>